<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="10" id="col-image">
          <el-image style="margin: 10px" :src="exhibit.exImage"></el-image>
        </el-col>
        <el-col :span="10">
          <el-card style="margin: 10px;" class="box-card">
            <el-descriptions title="展览详情" direction="vertical">
              <el-descriptions-item label="展览名称" span="3">
                <span style="font-size: 1.5em">{{ exhibit.exName }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="开始时间">
                <el-tag type="success">{{ exhibit.exStart }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="结束时间" span="2">
                <el-tag type="danger">{{ exhibit.exEnd }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="展览详情">
                <span style="font-size: 1.2em" v-html="exhibit.exDetail"></span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="margin: 10px;">
            <el-select v-model="moId" clearable placeholder="请选择">
              <el-option
                  v-for="moment in moments"
                  :key="moment.moId"
                  :label="moment.moment"
                  :value="moment.moId">
              </el-option>
            </el-select>
            <div style="margin: 10px">
              <p style="color: #fff">除法定节假日，博物院全年实行周一闭馆<br>
                <strong style="color: #eed49b">
                  <b>参观须提前订票，</b>
                  最早可于参观7日前20:00开始预订。
                  <b>年票观众须至少提前一日登记参观。</b>
                  刷身份证检票后入院参观。
                </strong>
              </p>
            </div>
            <el-button style="margin-top: 70px" type="success" @click="addBooking">预约</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-divider>
        <div style="background-color: #f9f4e9;color: #b99b3d">历史不落 繁华依旧</div>
      </el-divider>
      <el-row>
        <el-col :span="8" v-for="collection in collections" :key="collection.collectionId">
          <el-card shadow="hover" style="margin-top: 20px;height: 300px;width: 470px;" :body-style="{ padding: '0px' }">
            <el-image style="float: left;width: 40%;height: 300px" :src="collection.collectionImage"/>
            <div class="rightCard">
              <div style="font-weight: bold;color:#140C40;width: 100%">{{ collection.collectionName }}</div>
              <div style="margin-top: 2%">
                <el-tag size="mini" style="margin-left: 5px" type="primary">{{ collection.collectionEra }}</el-tag>
                <el-tag size="mini" style="margin-left: 12px" type="primary">{{ collection.categoryDetail }}</el-tag>
              </div>
              <div class="content">{{ collection.collectionDetail }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider>
        <div style="background-color: #f9f4e9;color: #b99b3d">历史不落 繁华依旧</div>
      </el-divider>
    </el-main>
  </el-container>
</template>

<script>
import {addMoment, getCollections, getExhibit, getMoment} from "@/api/request";

export default {
  data() {
    return {
      moId: 1,
      exId: 1,
      currentUser: {},
      booking: {
        userId: 1,
        exId: 1,
        moId: 1,
      },
      moments: [{
        moId: 1,
        moment: ''
      }],
      collections: [{
        collectionId: 1,
        categoryId: 1,
        categoryDetail: '',
        collectionEra: '',
        collectionDetail: '',
        collectionName: '',
        collectionImage: ''
      }],
      exhibit: {
        exId: 1,
        exName: '',
        exDetail: '',
        exImage: '',
        exStart: '',
        exEnd: ''
      }
    };
  },
  methods: {
    initExhibit() {
      getExhibit(this.exId).then(
          res => {
            if (res.data.code === 1) {
              this.exhibit = res.data.data
            }
          }
      )
    },
    initCollections() {
      getCollections(this.exId).then(
          res => {
            if (res.data.code === 1) {
              this.collections = res.data.data
            }
          }
      )
    },
    initMoment() {
      getMoment().then(
          res => {
            if (res.data.code === 1) {
              this.moments = res.data.data
            }
          }
      )
    },
    addBooking() {
      if (sessionStorage.getItem("currentUser") != null) {
        this.currentUser = JSON.parse(sessionStorage.getItem("currentUser"))
        this.booking.userId = this.currentUser.userId
        this.booking.exId = this.exId
        this.booking.moId = this.moId
        addMoment(this.booking).then(
            res => {
              if (res.data.code === 1) {
                this.$message.success("添加成功！")
              }
            }
        )
      } else {
        this.$router.push('/login')
        this.$message.error("未登录！")
      }
    },
  },
  mounted() {
    this.exId = this.$route.query.exId
    this.initExhibit()
    this.initCollections()
    this.initMoment()
  }
}
</script>

<style scoped>
</style>
